<template>
<el-container>
    <el-col>
     <el-row style="text-align: left">
        <el-form :model="formData"  ref="formData" label-width="80px">
              <el-form-item label="评论" prop="discuss" >
                <el-input v-model="formData.discuss"></el-input>
            </el-form-item>
            <el-form-item label="评分" prop="praise" >
                <el-rate
                allow-half
                v-model="value"
                show-text
                style="margin-left:50px">
                </el-rate>
            </el-form-item>
              <el-button style="float:right" type="primary" @click="handleSubmit"
                 :loading="loading">{{loading?'提交中...':'确认发送'}}</el-button>
        </el-form>
        
    </el-row> 
    <el-divider content-position="left" style="margin-top:100px"></el-divider>
    <el-row>
    <el-row v-for="(discuss,index) in tableData.records" :key="discuss.id" :offset="index > 0 ? 0 : 0">
      <el-container>
        <el-aside width="40px">
          <el-avatar style="float:left" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </el-aside>
      <el-container>
        <el-header>
          <span style="float:left;margin-right">{{discuss.username}}</span> 
          <el-rate
          v-model="discuss.grade"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}"
          style="float:left"
          ></el-rate>
          </el-header>
        <el-main style="text-align:left"><span style="font-size: 15px;color: #84858a;">{{discuss.discuss}}</span></el-main>
        <el-footer>
          <span style="float:left;margin-top:40px;font-size: 12px;color: #84858a;">发表于{{discuss.creatTime}}</span>
          <el-button class="el-icon-thumb" style="float:right;margin-top:40px" @click="praiseNum(discuss)">{{discuss.praise}}</el-button>
        </el-footer>
      </el-container>
    </el-container>
         <el-divider content-position="left"></el-divider>     
    </el-row>
  </el-row>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-size="page.pageSize"
            layout="total,prev, pager, next, jumper"
            :total="total">
        </el-pagination> 
   </el-col>
</el-container>
</template>
<script>

import {getCookie} from '@/libs/cookie'
import {page,discussadd} from "@/api/modules/coursediscuss";

  export default {
    name:'class_discuss',
   inject:['reload'],
    data() {
      
      return {
        page: {
          pageSize: 8,
          pageNum: 1,
        },
        value:null,
        message:{
          message1:'评论不能为空',
          message2:'评分不能为空',
          warning:'warning'
        },
        loading: false,
        total:0,
        current: 1,
        Inputpraise:{
          
        },
        tableData:[],
        formData:{
            discuss:null,
            createTime: '',
            grade:null,
            praise:0,
            username:'',
            courseId:'',
            etc:''

        }
      };
    },
    mounted(){
        let courseID = JSON.parse(getCookie("courseID") || '{}');
         this.formData.courseId = courseID.courseID
        let user = JSON.parse(getCookie("user") || '{}');
          this.formData.username = user.nickname
          this.loadTableData()
    },

    methods: {
      //点赞
      praiseNum(filter,discuss){
        this.Inputpraise = discuss
        //console.log(discuss)
        filter = {
          ...filter,
          ...this.Inputpraise
        }
        discussadd(filter).then(res =>{
            this.loadTableData()
          })
      },

        //分页相关事件处理
      handleSizeChange(val) {
        this.page.pageSize = val;
        this.loadTableData()
      },
      handleCurrentChange(val) {
        this.page.pageNum = val;
        this.current = val
        this.loadTableData()
      },
       loadTableData(filter,callback){
         this.formData.etc = this.page.pageNum
          filter = {
            ...filter,
            ...this.formData,
          }
          page(filter).then(res => {
            this.total = res.data.total
            this.tableData = {
              ...res.data,
              data: res.data.records
            }
            
            console.log(this.tableData)
          })
        },
      handleSubmit() {
        this.$refs.formData.validate(valid => {
          if (valid) {
            console.log(this.value )
            if(this.formData.discuss==null) this.toast(this.message.message1,8)
            else if(this.value== 0 ) this.toast(this.message.message2,9)
            else{
                this.loading = true
                this.formData.grade = this.value
                this.formData.praise = 0
              discussadd({
                ...this.formData,
              }).then(res => {
                this.loading = false
                if (res.success) {
                  this.toast(res.message)
                  this.reload()
                }
              })
           }

          }
        })
      },
        
    }
   
  }
</script>